Microsoft Playwright Testing で Microsoft Entra ID 認証がデフォルト方式に変わったので旧方式のアクセストークン生成を行ってみた

Microsoft Playwright Testing で Microsoft Entra ID 認証がデフォルト方式に変わったので旧方式のアクセストークン生成を行ってみた

Clock Icon2024.10.08

いわさです。

以前 Microsot Playwright Testing という、クラウド上で Playwright テストをリモート実行出来るサービス(プレビュー中)を紹介させて頂きました。

https://dev.classmethod.jp/articles/public-preview-playwright-testing/

ローカルの Playwright 環境からは、事前に発行されたアクセストークンを使ってサービスエンドポイントとの通信を行っていました。
こちらですが、先日のアップデートでアクセストークンのリスクを軽減するために Microsoft Entra ID を使った認証がデフォルトとなりました。

https://azure.microsoft.com/en-us/updates/v2/Introducing-Reporting-and-Microsoft-Entra-IDAuthentication-for-MPT

おっ、今までの方法だとまずいか?と思って確認してみたところ、旧来のアクセストークン発行方式もオプションで使うことが出来るようになっていました。
この記事では、有効化と発行までの流れを紹介します。

デフォルト設定の最新オンボーディングガイドは az login

冒頭の記事で以前もオンボーディング設定しているのですが、前回はアクセストークンを生成していました。
現在の最新版のガイドページではデフォルトではaz loginをするような流れになっています。

54271297-442A-4233-B2A4-12B036CF8975_1_105_c.jpeg

試しにオンボーディングしてみます。

% npm init @azure/microsoft-playwright-testing
> hoge1008playwright@1.0.0 npx
> init
Installing Service package (npm install --save-dev @azure/microsoft-playwright-testing)
Success! Created service configuration file - playwright.service.config.ts
To run playwrights tests using Playwright Service
        npx playwright test -c playwright.service.config.ts --workers=20
Playwright Service Portal - https://playwright.microsoft.com/
Getting Started - https://aka.ms/mpt/quickstart
If you're already using the Microsoft Playwright Testing service, please review the quickstart guide [https://aka.ms/mpt/quickstart] to ensure your tests continue running smoothly.
We've introduced changes related to authentication. You'll need to update the new config file to align with these changes.

% az login
A web browser has been opened at https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize. Please continue the login in the web browser. If no web browser is available or if the web browser fails to open, use device code flow with `az login --use-device-code`.
[
  {
    "cloudName": "AzureCloud",
:

  }
]

% export PLAYWRIGHT_SERVICE_URL=wss://eastus.api.playwright.microsoft.com/accounts/eastus_419709c9-2a54-44ce-8370-927f37ff236e/browsers

% npx playwright test -c playwright.service.config.ts
Running tests using Microsoft Playwright Testing service.
Running 6 tests using 5 workers
     1 [chromium] › example.spec.ts:10:5 › get started link
     2 [firefox] › example.spec.ts:3:5 › has title
  ✓  1 [chromium] › example.spec.ts:10:5 › get started link (2.9s)2 [firefox] › example.spec.ts:3:5 › has title (3.9s)3 [chromium] › example.spec.ts:3:5 › has title (1.8s)4 [firefox] › example.spec.ts:10:5 › get started link (3.8s)5 [webkit] › example.spec.ts:3:5 › has title (1.9s)6 [webkit] › example.spec.ts:10:5 › get started link (2.1s)
  6 passed (11.5s)
[========================================] 100%
Test report: https://playwright.microsoft.com/workspaces/eastus_419709c9-2a54-44ce-8370-927f37ff236e/runs/58b59cff-f041-4a61-b6db-af7a671c6393

リモートテスト実行まで出来ました。
現在のデフォルトはこの流れです。

旧来のアクセストークンを発行する流れ

では静的なアクセストークンを発行して使い回す必要のある環境の場合はどうするのが良いでしょうか。
実は今回のアップデート後も旧来のアクセストークン発行は可能です。

設定画面を開きましょう。

198FD6E1-F0FC-44BC-8100-B3DC377A57CC_1_105_c.jpeg

設定の Authentication メニューで認証設定をカスタマイズ出来ます。
デフォルトが Microsoft Entra ID である点は変更出来ません。オプションでアクセストークンを使えるように有効化出来ます。

66A8ADFD-2817-4500-B7BB-332F1C59804E_1_105_c.jpeg

注意書きを呼んだ上で有効化しましょう。具体的にはアクセストークンを発行して終わりではなく、発行したトークンをしっかり管理したり、あるいは適切なセキュリティ対策を検討します。
トークンをコードベースには直接含めないようにするとか定期的にトークンをローテーションし、不要になったトークンはすぐに無効化することなどは必要です。

AA5A579D-187F-4B0E-BF44-2D7381D7C37A.png

有効化すると、アクセストークンの生成が出来るようになりました。ガイドからも作成出来ますし、この画面からも作成出来ます。

AE73199A-E06A-43B2-B057-1F4E82993791.png

従来同様に作成時には期限を設定可能です。

EAD5943E-F36E-4A08-A955-B359BF9C2F9A.png

作成されたアクセストークンを取得し、ローカルから利用します。

6986BCD4-BDD2-443F-A324-0B74388BBBD8.png

なお、アクセストークン機能を有効化することで、セットアップガイドページ上でも Entra ID とアクセストークンの 2 つを切り替えれるようになりました。

E34D946C-D871-42E8-85F1-D4239E8696E3.png

さいごに

本日は Microsoft Playwright Testing で Microsoft Entra ID 認証がデフォルト方式に変わったので旧方式のアクセストークン生成を行ってみました。

基本的に Entra ID を使うべきですが、どうしてもアクセストークンを個別に発行して使いたいケースもまだある気がしますのでそういった時の選択肢として覚えておきましょう。

まだまだプレビュー中のようですが、Microsoft Playwright Testing はおもしろいサービスだと思いますのでアップデートをキャッチアップしていきたいです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.